<template>
	<div>

		<!-- <div style="background-color: #f4f5f6;padding-top: 33px;margin-top:20px;">
			<el-form ref="form" :inline="true" :model="formInline" label-width="80px">
				<el-form-item label="名称" placeholder="搜索名称/编号进行查询">
					<el-input v-model="formInline.noticeTitle"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="fetchData(1)">查询</el-button>
					<el-button @click="clean()">重置</el-button>
				</el-form-item> 
			</el-form>
		</div> -->
		<el-row :span="24" style="margin:26px 0 0;">
			<div style="display: flex;justify-content: flex-start;">
				<p @click="navToPlatform()" class="tabHeader" >系统公告</p>
				<p @click="navToRuleText()" class="tabHeader" >规则文案</p>
				<p class="tabHeader" style="color: #409eff;border-bottom: 0;">帮助中心</p>
				<p @click="navToCityNotice()" class="tabHeader">城主公告</p>
				<p @click="navToNew()" class="tabHeader">新闻发布</p>
			</div>
			<el-row style="margin-top: 20px;">
				<el-button
				    class="btnPad " type="primary"
				    @click="edit('add')">+新增
				 </el-button>
				<!-- <el-button @click="getRuleList()"  :class="[isActive==true?'btnChoose':'btnPad'] " plain>规则管理</el-button> -->
<!-- 				<el-button @click="getDealList()"  :class="[isActive2==true?'btnChoose':'btnPad'] " plain>协议管理</el-button>
				<el-button @click="getNameInfoList()"  :class="[isActive1==true?'btnChoose':'btnPad'] " plain>名词简述</el-button> -->
				<!-- <el-button @click="getHotelList()" :class="[isActive4==true?'btnChoose':'btnPad'] " plain>酒店推荐</el-button> -->
			</el-row>
			<div style="margin-top: 20px;">
				<el-table
				        :data="pageInfo.dtos"
				        v-loading="table_loading"
				        element-table_loading-text="加载中"
				        stripe
				        @sort-change='order'
				        style="width: 100%">
				    <el-table-column
				            type="index"
				            width="80"
				            label="序号">
				    </el-table-column>
				    <el-table-column
				            width="150"
				            label="icon">
				            <template scope="scope">
				                <img class="avatar" :src="scope.row.helpIcon" style="width: 55px;height: 55px;border-radius: 0;">
				            </template>
				    </el-table-column>
				    <el-table-column
				            prop="helpTitle"
				            label="标题">
				    </el-table-column>
				    <el-table-column label="操作" width="150">
				        <template scope="scope">
				            <el-button
				                    size="small"
				                    type="primary"
				                    @click="edit(scope.row.helpId)">编辑
				            </el-button>
				        </template>
				    </el-table-column>
				</el-table>
				<div class="paginate">
				    <el-pagination
				            @current-change="handleCurrentChange"
				            :current-page="pageInfo.pageNum"
				            :page-size="pageInfo.pageSize"
				            layout="total, prev, pager, next, jumper"
				            :total="pageInfo.count">
				    </el-pagination>
				</div>
			</div>
		</el-row>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				pageInfo: {
				    pageNum: 1,
				    pageSize: 10,
				    count: 1,
				    dtos:[]
				},
				table_loading:false,
				hashrefType:['单商品','多商品','链接','品牌','文章'],
				URL:URL,
				desc:'DESC',
				sort:'CRE_TIME'
			}
		},
		created() {

		},
		activated() {
			this.fetchData(this.pageInfo.pageNum);	
		},
		mounted() {

		},
		methods: {
			navToCityNotice() {
				this.$router.push('/official/city_notice')
			},
			navToRuleText() {
				this.$router.push('/official/rule_text')
			},
			navToPlatform() {
				this.$router.push('/official/platform_rule')
			},
			navToNew(){
				this.$router.push('/official/newsl_ist')
			},
			fetchData (page = 1) {
			    this.table_loading = true;
			    this.pageInfo.pageNo = page
			    this.dataApi.ajax('selectPageSysHelp', {pageNum: this.pageInfo.pageNum,pageSize:this.pageInfo.pageSize}, res => {
			        this.table_loading = false;
			        if (res.responseType === 'S') {
			            this.pageInfo = res
			        }
			    });
			
			},
			edit(id){
			  this.$router.push('/official/help_detail/'+id)
			},
			
			using(item){
			     var type=''
			     var state=''
			     let data=generateObj(item)
			      if (data.isShow=='1') {
			         type='禁用'
			         state='0'
			      }else{
			        type='启用'
			        state='1'
			      }
			      data.isShow=state
			      this.$confirm('确定'+type+'?', '提示', {
			         confirmButtonText: '确定',
			         cancelButtonText: '取消',
			         type: 'warning'
			       }).then(() => {
			          this.dataApi.ajax('editSysAppStartImg',data, res => {
			           if (res.responseType === 'S') {
			              this.showMsg(type+'成功')
			               this.fetchData(this.pageInfo.pageNum)
			           }
			        });
			       }).catch(() => {
			                  
			       });
			},         
			   handleCurrentChange(val) {
			       this.fetchData(val)
			   },
			   handleDetele(id){
			   this.$confirm('确定删除?', '提示', {
			             confirmButtonText: '确定',
			             cancelButtonText: '取消',
			             type: 'warning'
			       }).then(() => {
			          this.dataApi.ajax('deleteNewBanner', {bannerId:id}, res => {
			           if (res.responseType === 'S') {
			               this.showMsg('删除成功')
			               this.fetchData(this.pageInfo.pageNo);
			           }
			         });
			       }).catch(() => {
			                  
			       });
			      
			   },
			   order(column){
			       if (!column.order) {
			           return;
			       }
			       if (column.order=='ascending') {
			            this.desc='ASC'
			       }else{
			           this.desc='DESC'
			       }
			       this.sort=column.prop
			       this.fetchData(this.pageInfo.pageNum)
			   },
			   editOrder(item){
			            if (Math.floor(item.sort) <= 0) {
			               item.sort = item.OldProbability || 0;
			               return false;
			           }
			           if (item.OldProbability == item.sort) return false;
			           if (!isNumber(item.sort)) {
			              this.showMsg('只能输入数字','warning')
			              item.sort=item.OldProbability
			              return false;
			           }
			           if (item.sort > this.pageInfo.totalRows){
			              this.showMsg('排序值不能大于总数','warning')
			              item.sort=item.OldProbability
			              return false;
			           }
			            this.dataApi.ajax('editNewBanner',item, res => {
			               if (res.responseType === 'S') {
			                   this.$message({
			                       type: 'success',
			                       message: '修改成功!'
			                   });
			                   this.fetchData(this.pageInfo.pageNo)
			               }
			           });
			   },
			   setOldProbability(item) {
			       item.OldProbability = item.sort
			   },
			
		}
	}
</script>

<style>
	.tabHeader {
		width: 100px;
		text-align: center;
		display: inline-block;
		padding: 5px 10px;
		margin: 0;
		border: 1px solid #909399;
		border-right: 0;
		cursor: pointer;
	}

	.tabHeader:last-child {
		width: 100px;
		text-align: center;
		display: inline-block;
		padding: 5px 10px;
		margin: 0;
		border: 1px solid #909399;
	}

	.el-radio-button__orig-radio:checked+.el-radio-button__inner {
		border-bottom-color: #FFFFFF;
		background-color: #FFFFFF;
		color: #20a0ff;
	}

	.btnPad {
		width: 120px;
		text-align: center;
	}

	.btnChoose {
		width: 120px;
		text-align: center;
		border: 1px solid #20a0ff;
		color: #20a0ff;
	}
</style>
